<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="/static/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>

      <style>
          hr {
            margin-top: 10px;
            margin-bottom: 10px;
            border: 0;
            border-top: 1px solid white;
        }


        html {
          background: url(/static/img/login.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
        }

      </style>
    <title>登录</title>

  </head>
  <body style="width:98%;background-color: transparent;">



    <div class="row" style="margin-top:15%;margin-left:55%;background-color: transparent;">

        <form action="/auth/login/"  method="post">

            {% csrf_token %}

            <div class="panel panel-default" style="width:400px;">

              <div class="panel-heading">
                  <h4>登录</h4>
              </div>


              <div class="panel-body" id="login-info">

                  <input type="text" placeholder="用户名" class="form-control" name="username">
                  <hr >
                  <input type="password" placeholder="密码" class="form-control" name="passwd">

                  {% if msg != 'login' %}
                  <div class="alert alert-danger" role="alert">
                      {{ msg }}
                  </div>
                  {% endif %}

              </div>

                <div class="panel-footer" style="padding-top:20px;padding-bottom:30px">

                    <button type="submit" class="btn btn-primary form-control" id="sub-login" >登录</button>

                </div>

              </div>
        </form>

        </div>




    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"  ></script>
    <script type="text/javascript" src="/static/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>


  </body>
</html>
